<template>
  <div class="table-card">
    <el-table :data="tableData.table_data" border fit :cell-style="{ padding: '0', fontSize: '12px' }"
      :row-class-name="tableRowClassName" :header-cell-class-name="tableHeaderRowClassName"
      @cell-mouse-enter="cellMouseHover" @cell-mouse-leave="cellMouseHover">
      <el-table-column prop="name" label="">
        <template #header="scope">
          段{{ tableData.time_code }}
          <template v-if="tableData.tag">
            <div :class="getClass(tableData.tag)">
              {{ tableData.tag.charAt(0) }}
            </div>
          </template>
        </template>
        <template #default="scope">
          <template v-if="scope.$index < 5">
            <img src="../../../assets/svg/buy.svg" alt="">
          </template>
          <template v-else>
            <img src="../../../assets/svg/sale.svg" alt="">
          </template>
          {{ scope.row.name }}
        </template>
      </el-table-column>

      <el-table-column prop="price" label="电价">
        <template #default="scope">
          <template v-if="scope.row.price === null">
            --
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="amount" label="电量">
        <template #default="scope">
          <template v-if="scope.row.amount === null">
            --
          </template>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="js">
import { ref, watch } from 'vue';
const props = defineProps(['tableData', 'highLightRow'])
const emit = defineEmits(['mouseHover'])
const currentLine = ref()

// 行的样式
const tableRowClassName = ({
  row,
  rowIndex,
}) => {
  if (row.name === currentLine.value) {
  if (rowIndex == 4) {
    return row.buy_flag ? 'buy-flag' : 'blue-text highlight-flag ';
  } else if (rowIndex == 5) {
    return row.sale_flag ? 'sale-flag' : 'orange-text highlight-flag';
  } else {
    return 'highlight-flag'; // 当满足 row.name === currentLine.value 但没有特定条件时，返回 highlight-flag
  }
} else {
  if (rowIndex == 4) {
    return row.buy_flag ? 'buy-flag' : 'blue-text gray-row';
  } else if (rowIndex == 5) {
    return row.sale_flag ? 'sale-flag' : 'orange-text block-row';
  } else {
    return rowIndex % 2 ? 'block-row' : 'gray-row'; // 默认行样式处理
  }
}
}
// 表头样式
const tableHeaderRowClassName = ({
  row, column, rowIndex, columnIndex
}) => {
  if (columnIndex == 0) {
    return 'title-header'
  }
  return 'header'
}

// 鼠标经过行
// 鼠标离开行
const cellMouseHover = (row, column, cell, event) => {
  currentLine.value = event.type == 'mouseenter' ? row.name : ''
  emit('mouseHover', currentLine.value)
}

const getClass = (tag) => {
  const classMap = {
    '峰': 'tip',
    '尖峰': 'peak',
    '谷': 'grain',
    '平': 'flat',
    '深谷': 'deep-grain'
  };
  return classMap[tag];
}
watch(
  () => props.highLightRow,
  (newProps) => {
    currentLine.value = newProps
  }, { deep: true }
)
</script>
<style scoped lang="less">
.table-card {
  width: 100%;
  display: inline-block;
  margin-right: 13px;
  margin-bottom: 16px;
  min-width: 200px;

  .tip,
  .peak,
  .grain,
  .deep-grain,
  .flat {
    display: inline-block;
    padding: 2px;
    height: 14px;
    border-radius: 2px;
    font-weight: bold;
    line-height: 14px;
    text-align: left;
    margin-left: 4px;
  }

  .tip {
    background: rgba(247, 101, 96, 0.2);
    border: 1px solid #F6655F;
    color: #F53F3F;
  }

  .peak {
    background: #F53F3F;
    color: #F7F8FA;
  }

  .grain {
    background: rgba(79, 189, 24, 0.2);
    border: 1px solid #50BD18;
    color: #52C41A;
  }

  .deep-grain {
    background: #4FBD18;
    color: #F7F8FA;
  }

  .flat {
    background: rgba(169, 174, 184, 0.2);
    border: 1px solid #F7F8FA;
    color: #F7F8FA;
  }

}


/deep/.el-table {
  /* // 表格边框的颜色，可以通过这个变量来设置表格的边框颜色。 */
  --el-table-border-color: #4E5969;
  /* // 表格边框的样式，一般为实线或虚线，可以通过这个变量来设置表格的边框样式。 */
  --el-table-border: 1px solid var(--el-table-border-color);
  /* // 表格中文字的颜色，可以通过这个变量来设置表格中文字的颜色。 */
  --el-table-text-color: #F7F8FA;
  /* // 表头中文字的颜色，可以通过这个变量来设置表头中文字的颜色。 */
  --el-table-header-text-color: #F7F8FA;
  /* // 鼠标悬停在行上时的背景色，可以通过这个变量来设置鼠标悬停时行的背景色。 */
  --el-table-row-hover-bg-color: #49505b;
  /* // 当前行的背景色，可以通过这个变量来设置当前行的背景色。 */
  --el-table-current-row-bg-color: #49505b;
  /* // 表头的背景色，可以通过这个变量来设置表头的背景色。 */
  --el-table-header-bg-color: #1d2129;
}

/deep/ .el-table {
  .header,
  .title-header,
  .hover-row,
  .gray-row,
  .block-row,
  .buy-flag,
  .sale-flag,
  .highlight-flag {
    height: calc(((100vh - 122px) / 3 - 13px)/ 11);
  }
}

/deep/.el-table .header {
  /* height: 27px; */
}

/deep/.el-table .title-header {
  background-color: #5b71b8;
  /* height: 27px; */
}

/deep/.el-table .el-table__cell {
  padding: 0;
}

/deep/.el-table .cell {
  padding: 0 0 0 5px;
}

/deep/.el-table .hover-row {
  --el-table-tr-bg-color: #49505b;
  /* height: 27px; */
}

/deep/.el-table .gray-row {
  --el-table-tr-bg-color: #14151a;
  /* height: 27px; */
}

/deep/.el-table .block-row {
  --el-table-tr-bg-color: #1d2129;
  /* height: 27px; */
}

/deep/.el-table .blue-text {
  color: #5F8AFF;
}

/deep/.el-table .orange-text {
  color: #FF8519;
}

/deep/.el-table .buy-flag {
  --el-table-tr-bg-color: #406CFF;
  color: #F7F8FA;
}

/deep/.el-table .sale-flag {
  --el-table-tr-bg-color: #FF8519;
  color: #F7F8FA;
}

/deep/.el-table .highlight-flag {
  --el-table-tr-bg-color: #49505b;
  // color: #F7F8FA;
}
</style>